<template>
    <div style="margin: 0 auto; width: 60%">
        <el-card shadow="always" :body-style="{ padding: '20px', height: '500px' }" v-loading="loading">
            <template #header>
                文件列表
                <div class="upload-btn">
                    <el-upload
                        class="upload-demo"
                        action="http://localhost/api/file/upload"
                        accept="all"
                        multiple
                        :before-upload="beforeUpload"
                        :on-success="handleUploadSuccess"
                        :on-error="handelUploadError"
                        :show-file-list="false"
                        :limit="3"
                        :file-list="fileList"
                        >
                        <el-button size="small" type="primary">点击上传</el-button>

                    </el-upload>
                </div>
                <div class="upload-btn" @click="getFiles">
                    <el-button size="small" type="primary" >获取文件</el-button>
                </div>

            </template>
            <!-- card body -->
            <el-table
            :data="files"
            stripe
            height="500px"
            style="width: 100%">
                <el-table-column
                    prop="filename"
                    label="文件名"
                    width="300px">
                </el-table-column>
                <el-table-column
                    label="操作"
                    width="180"
                >
                    <template #default="scope">
                        <el-button type="danger" size="small" @click="handleDel(scope)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
    </div>
</template>

<script>
import axios from 'axios'

export default {
    name: 'File',
    data(){
        return {
            fileList: [],
            files: [],
            loading: false,
        }
    },
    methods: {
        beforeUpload(){
            this.loading = true
        },
        handelUploadError(){
            this.loading = false
        },
        async handleUploadSuccess(){
            await this.getFiles();
        },
        async getFiles(){
            this.loading = true;
            let data = await axios.get('http://localhost/api/file')
            .then(res => res.data)
            .catch(err => {
                console.error(err); 
            })
            this.loading = false;
            this.files = data
        },
         async handleDel(scope){
            this.loading = true;
            let filename = scope.row.filename;
            await axios.post('http://localhost/api/file/del',{
                filename: filename,
            })
            this.loading = false;
            await this.getFiles();
        }
    },
    async created(){
        this.loading = true;
        let data = await axios.get('http://localhost/api/file')
        .then(res => res.data)
        .catch(err => {
            console.error(err); 
        })
        await this.getFiles();
        this.loading = false;
        this.files = data
    },
   
}
</script>

<style lang="scss" scoped>
.upload-btn {
    float: right;
    margin-right: 10px;
}
</style>